<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta_index" /}
    {include file="layout:_tree" /}
</head>
<body>
<div class="layui-fluid layui-col-space5">
    <div class="layui-col-xs3">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <h3>权限节点</h3>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <div style="overflow: auto;">
                    <ul id="tree" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs9">
        <div class="layuimini-container">
            <div class="layuimini-main">
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <input type="text" name="name" placeholder="请输入规则标识" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="title" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <select name="state">
                                <option value="">状态(全部)</option>
                                <option value="0">禁用</option>
                                <option value="1">启用</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="listSearch">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </fieldset>
                <script type="text/html" id="listTableToolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
                    </div>
                </script>

                <table id="listTable" lay-filter="listTable"></table>
                <script type="text/html" id="buttonTpl">
                    {{#  if(d.state == 1){ }}
                    <button class="layui-btn layui-btn-xs" lay-event="change">已审核</button>
                    {{#  } else { }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="change">未审核</button>
                    {{#  } }}
                </script>
                <script type="text/html" id="buttonMenu">
                    {{#  if(d.menu == 1){ }}
                    <button class="layui-btn layui-btn-checked layui-btn-xs" lay-event="menu">菜单</button>
                    {{#  } else { }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="menu">方法</button>
                    {{#  } }}
                </script>
                <script type="text/html" id="listTableBar">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                    {{#  if(d.id ==1){ }}
                    <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    {{#  } }}
                </script>
            </div>
        </div>
    </div>
</div>

{include file="layout:_footer" /}
<script>
    var del_url = '{:url("auth/remove")}';
    var add_url = '{:url("auth/edit")}';
    var change_url = '{:url("auth/change")}';
    var menu_url = '{:url("auth/menu")}';
    layui.use(['dtree', 'form', 'table','common'], function(){
        var $ = layui.$
            ,common = layui.common
            ,dtree = layui.dtree
            ,table = layui.table;

        //仅节点左侧图标控制收缩
        var Tree = dtree.render({
            elem: "#tree",
            url: "{:url('auth/tree')}",
            initLevel:3,
            menubar:true,
            toolbar:true,
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            skin: "layui",  // laySimple主题风格
            toolbarShow:[], // 默认按钮制空
            toolbarExt:[
                {toolbarId: "treeAdd",icon:"dtree-icon-roundadd",title:"新增权限",handler: function(node,$div){
                        common.adminShow(add_url+'?pid='+node.nodeId,"添加权限",'500','450','addEdit','listTable');
                    }
                },
                {toolbarId: "treeEdit",icon:"dtree-icon-bianji",title:"编辑权限",handler: function(node,$div){
                        common.adminShow(add_url+'?id='+node.nodeId,"编辑权限",'500','450','addEdit','listTable');
                    }
                },
                {toolbarId: "treeDel",icon:"dtree-icon-roundclose",title:"删除权限",handler: function(node,$div){
                        //删除列表的数据
                        common.tableDelete(del_url,node.nodeId,'listTable');
                        Tree.partialRefreshDel($div); // 这样即可删除节点
                    }
                }
            ]
        });


        //数据列表
        table.render({
            elem: '#listTable',
            url : "{:url('auth/index')}",
            toolbar: '#listTableToolbar',
            cols : [[
                {type: 'checkbox'},
                {field: 'id', title: 'ID',width:60, align:"center"},
                {field: 'name', title: '规则标识', align:'center'},
                {field: 'title', title: '权限名称', align:'center'},
                {field: 'menu', title: '类型', align:'center',templet: '#buttonMenu'},
                {field: 'state', title: '状态', align:'center',templet: '#buttonTpl'},
                {title: '操作', fixed:"right",align:"center",templet:'#listTableBar'}
            ]],
            page: true, //是否显示分页
            limits:[50,100,200,300,500],//显示
            limit: 15 //每页默认显示的数量

        });

        //监听搜索
        common.enterSearch('listSearch');
        common.tableSearch('listSearch','listTable');

        //列表操作
        table.on('tool(listTable)', function(obj){
            var layEvent = obj.event, data = obj.data;
            if(layEvent === 'del'){ //删除
                common.tableDelete(del_url,data.id,'listTable');
            }else if (layEvent==='edit'){
                common.adminShow(add_url+'?id='+data.id,"编辑权限",'500','450','addEdit','listTable');
            }else if(layEvent==='change'){
                var state = data.state==1?0:1;
                var msg =  data.state==1?'确定要禁止使用此权限？':'确定审核此权限？';
                common.tableStatus(change_url,{id:data.id,state:state},'listTable',msg);
            }else if(layEvent==='menu'){
                var menu = data.menu==1?0:1;
                var msg =  data.menu==1?'确定要将菜单改为方法么？':'确定要将方法改为菜单么？';
                common.tableStatus(menu_url,{id:data.id,menu:menu},'listTable',msg);
            }
        });

        //列表工具栏操作
        table.on('toolbar(listTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'del':common.tableDelete(del_url,checkStatus.data,'listTable');break;
                case 'add':common.adminShow(add_url,"添加权限",'500','450','addEdit','listTable');break;
            }
        });


    });
</script>
</body>
</html>
